<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flappy Bird</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4CAF50',
                        secondary: '#FFC107',
                        accent: '#F44336',
                        background: '#87CEEB',
                        pipe: '#388E3C',
                        ground: '#8D6E63',
                    },
                    fontFamily: {
                        game: ['"Comic Sans MS"', 'cursive', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bird-flap {
                animation: birdFlap 0.3s ease-in-out infinite alternate;
            }
            .pulse-effect {
                animation: pulseEffect 2s infinite;
            }
            .fade-in {
                animation: fadeIn 0.5s ease-in-out;
            }
            .slide-up {
                animation: slideUp 0.5s ease-out;
            }
            .shake {
                animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
            }
        }

        @keyframes birdFlap {
            from { transform: rotate(-10deg); }
            to { transform: rotate(10deg); }
        }

        @keyframes pulseEffect {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideUp {
            from { transform: translateY(50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        @keyframes shake {
            10%, 90% { transform: translate3d(-1px, 0, 0); }
            20%, 80% { transform: translate3d(2px, 0, 0); }
            30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
            40%, 60% { transform: translate3d(4px, 0, 0); }
        }
    </style>
</head>
<body class="bg-background font-game overflow-hidden h-screen flex items-center justify-center">
    <div id="game-container" class="relative w-full max-w-md h-[600px] bg-background shadow-2xl overflow-hidden">
        <!-- Start Screen -->
        <div id="start-screen" class="absolute inset-0 flex flex-col items-center justify-center z-30 fade-in">
            <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold text-white drop-shadow-lg mb-8">Flappy Bird</h1>
            <div class="bird-flap mb-16">
                <div class="w-12 h-12 bg-secondary rounded-full relative flex items-center justify-center">
                    <div class="w-4 h-4 bg-white rounded-full ml-2 flex items-center justify-center">
                        <div class="w-2 h-2 bg-black rounded-full"></div>
                    </div>
                    <div class="w-8 h-3 bg-accent absolute right-[-10px] rotate-0"></div>
                    <div class="w-10 h-2 bg-accent/80 absolute right-[-12px] top-[10px] rotate-[-10deg]"></div>
                </div>
            </div>
            <button id="start-button" class="bg-accent hover:bg-accent/80 text-white font-bold py-3 px-8 rounded-full text-xl shadow-lg transition-all transform hover:scale-105 focus:outline-none pulse-effect">
                <i class="fa fa-play mr-2"></i>Start Game
            </button>
            <div class="mt-10 text-white text-center px-6">
                <p class="mb-2">Press SPACE or CLICK to fly</p>
                <p>Try to pass through the pipes without hitting them</p>
            </div>
            <div class="absolute bottom-6 text-white text-sm">
                <p>High Score: <span id="high-score-display">0</span></p>
            </div>
        </div>

        <!-- Game Screen -->
        <div id="game-screen" class="absolute inset-0 z-10 hidden">
            <div id="score-display" class="absolute top-6 left-1/2 transform -translate-x-1/2 text-white text-[clamp(1.5rem,3vw,2.5rem)] font-bold drop-shadow-lg z-20">0</div>
            
            <!-- Pipes will be generated here -->
            <div id="pipes-container" class="absolute inset-0 overflow-hidden"></div>
            
            <!-- Bird -->
            <div id="bird" class="absolute w-12 h-12 bg-secondary rounded-full left-[80px] top-[250px] flex items-center justify-center shadow-lg z-10">
                <div class="w-4 h-4 bg-white rounded-full ml-2 flex items-center justify-center">
                    <div class="w-2 h-2 bg-black rounded-full"></div>
                </div>
                <div class="w-8 h-3 bg-accent absolute right-[-10px] rotate-0"></div>
                <div class="w-10 h-2 bg-accent/80 absolute right-[-12px] top-[10px] rotate-[-10deg]"></div>
            </div>
            
            <!-- Ground -->
            <div id="ground" class="absolute bottom-0 left-0 w-full h-20 bg-ground z-10">
                <div class="absolute top-0 left-0 w-full h-4 bg-gradient-to-b from-green-600 to-ground"></div>
            </div>
        </div>

        <!-- Game Over Screen -->
        <div id="game-over-screen" class="absolute inset-0 flex flex-col items-center justify-center z-30 hidden fade-in">
            <div class="bg-white/90 rounded-xl p-8 shadow-2xl w-[80%] max-w-xs text-center slide-up">
                <h2 class="text-2xl font-bold text-accent mb-2">Game Over</h2>
                <p class="text-gray-700 mb-4">Your Score: <span id="final-score">0</span></p>
                <p class="text-gray-700 mb-6">High Score: <span id="final-high-score">0</span></p>
                <button id="restart-button" class="bg-primary hover:bg-primary/80 text-white font-bold py-2 px-6 rounded-full shadow transition-all transform hover:scale-105 focus:outline-none w-full">
                    <i class="fa fa-refresh mr-2"></i>Play Again
                </button>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // Game elements
            const startScreen = document.getElementById('start-screen');
            const gameScreen = document.getElementById('game-screen');
            const gameOverScreen = document.getElementById('game-over-screen');
            const startButton = document.getElementById('start-button');
            const restartButton = document.getElementById('restart-button');
            const bird = document.getElementById('bird');
            const pipesContainer = document.getElementById('pipes-container');
            const scoreDisplay = document.getElementById('score-display');
            const finalScore = document.getElementById('final-score');
            const highScoreDisplay = document.getElementById('high-score-display');
            const finalHighScore = document.getElementById('final-high-score');
            const ground = document.getElementById('ground');

            // Game variables
            let birdY = 250;
            let birdSpeed = 0;
            let gravity = 0.6;
            let jumpPower = -12;
            let score = 0;
            let highScore = localStorage.getItem('flappyHighScore') || 0;
            let gameActive = false;
            let pipeInterval;
            let animationFrameId;
            let pipes = [];
            let groundPosition = 0;
            let groundSpeed = 3;

            // Update high score display
            highScoreDisplay.textContent = highScore;

            // Bird movement
            function jump() {
                if (gameActive) {
                    birdSpeed = jumpPower;
                    bird.classList.add('bird-flap');
                    setTimeout(() => {
                        bird.classList.remove('bird-flap');
                    }, 300);
                }
            }

            // Create pipes
            function createPipe() {
                if (!gameActive) return;
                
                const pipeHeight = 150 + Math.random() * 100;
                const gap = 150;
                const pipeTop = document.createElement('div');
                const pipeBottom = document.createElement('div');
                const pipePair = {
                    x: 500,
                    width: 60,
                    passed: false
                };

                // Top pipe
                pipeTop.className = 'absolute bg-pipe shadow-md';
                pipeTop.style.width = `${pipePair.width}px`;
                pipeTop.style.height = `${pipeHeight}px`;
                pipeTop.style.top = '0';
                pipeTop.style.left = '100%';
                
                // Bottom pipe
                pipeBottom.className = 'absolute bg-pipe shadow-md';
                pipeBottom.style.width = `${pipePair.width}px`;
                pipeBottom.style.height = `${400 - pipeHeight - gap}px`;
                pipeBottom.style.bottom = '20px'; // Height of ground
                pipeBottom.style.left = '100%';

                // Add pipe caps
                const pipeTopCap = document.createElement('div');
                pipeTopCap.className = 'absolute bg-pipe/90';
                pipeTopCap.style.width = `${pipePair.width + 10}px`;
                pipeTopCap.style.height = '15px';
                pipeTopCap.style.bottom = '0';
                pipeTopCap.style.left = '-5px';
                pipeTop.appendChild(pipeTopCap);

                const pipeBottomCap = document.createElement('div');
                pipeBottomCap.className = 'absolute bg-pipe/90';
                pipeBottomCap.style.width = `${pipePair.width + 10}px`;
                pipeBottomCap.style.height = '15px';
                pipeBottomCap.style.top = '0';
                pipeBottomCap.style.left = '-5px';
                pipeBottom.appendChild(pipeBottomCap);

                pipesContainer.appendChild(pipeTop);
                pipesContainer.appendChild(pipeBottom);

                pipePair.topElement = pipeTop;
                pipePair.bottomElement = pipeBottom;
                pipes.push(pipePair);
            }

            // Move pipes
            function movePipes() {
                pipes.forEach(pipe => {
                    pipe.x -= 3;
                    pipe.topElement.style.left = `${pipe.x}px`;
                    pipe.bottomElement.style.left = `${pipe.x}px`;

                    // Check if bird passed the pipe
                    if (pipe.x + pipe.width < 80 && !pipe.passed) {
                        score++;
                        scoreDisplay.textContent = score;
                        pipe.passed = true;
                    }

                    // Remove pipes that are off screen
                    if (pipe.x + pipe.width < 0) {
                        pipesContainer.removeChild(pipe.topElement);
                        pipesContainer.removeChild(pipe.bottomElement);
                        pipes = pipes.filter(p => p !== pipe);
                    }
                });
            }

            // Move ground
            function moveGround() {
                groundPosition -= groundSpeed;
                if (groundPosition < -40) {
                    groundPosition = 0;
                }
                ground.style.backgroundPositionX = `${groundPosition}px`;
            }

            // Update bird position
            function updateBird() {
                birdSpeed += gravity;
                birdY += birdSpeed;
                bird.style.top = `${birdY}px`;

                // Rotate bird based on speed
                const rotation = Math.min(Math.max(birdSpeed * 2, -25), 45);
                bird.style.transform = `rotate(${rotation}deg)`;

                // Check for collision with ground
                if (birdY + 12 > 580) { // 600 (height) - 20 (ground)
                    endGame();
                }

                // Check for collision with ceiling
                if (birdY < 0) {
                    birdY = 0;
                    birdSpeed = 0;
                }
            }

            // Check for collisions with pipes
            function checkCollisions() {
                if (!gameActive) return;

                const birdRect = {
                    x: 80,
                    y: birdY,
                    width: 12,
                    height: 12
                };

                // Ground collision
                if (birdY + birdRect.height > 580) {
                    endGame();
                    return;
                }

                // Pipe collision
                pipes.forEach(pipe => {
                    const topPipeRect = {
                        x: pipe.x,
                        y: 0,
                        width: pipe.width,
                        height: parseInt(pipe.topElement.style.height)
                    };

                    const bottomPipeRect = {
                        x: pipe.x,
                        y: 600 - parseInt(pipe.bottomElement.style.height) - 20,
                        width: pipe.width,
                        height: parseInt(pipe.bottomElement.style.height)
                    };

                    if (isColliding(birdRect, topPipeRect) || isColliding(birdRect, bottomPipeRect)) {
                        endGame();
                    }
                });
            }

            // Collision detection helper
            function isColliding(rect1, rect2) {
                return rect1.x < rect2.x + rect2.width &&
                       rect1.x + rect1.width > rect2.x &&
                       rect1.y < rect2.y + rect2.height &&
                       rect1.y + rect1.height > rect2.y;
            }

            // Game loop
            function gameLoop() {
                if (!gameActive) return;

                updateBird();
                movePipes();
                moveGround();
                checkCollisions();
                
                animationFrameId = requestAnimationFrame(gameLoop);
            }

            // Start game
            function startGame() {
                // Reset game state
                birdY = 250;
                birdSpeed = 0;
                score = 0;
                pipes = [];
                gameActive = true;
                
                // Clear pipes container
                pipesContainer.innerHTML = '';
                
                // Update UI
                startScreen.classList.add('hidden');
                gameScreen.classList.remove('hidden');
                gameOverScreen.classList.add('hidden');
                scoreDisplay.textContent = '0';
                
                // Start generating pipes
                createPipe();
                pipeInterval = setInterval(createPipe, 2000);
                
                // Start game loop
                gameLoop();
            }

            // End game
            function endGame() {
                gameActive = false;
                bird.classList.add('shake');
                
                // Update high score
                if (score > highScore) {
                    highScore = score;
                    localStorage.setItem('flappyHighScore', highScore);
                }
                
                // Update UI
                finalScore.textContent = score;
                finalHighScore.textContent = highScore;
                highScoreDisplay.textContent = highScore;
                
                // Stop game loop and pipe generation
                clearInterval(pipeInterval);
                cancelAnimationFrame(animationFrameId);
                
                // Show game over screen after a delay
                setTimeout(() => {
                    gameScreen.classList.add('hidden');
                    gameOverScreen.classList.remove('hidden');
                    bird.classList.remove('shake');
                }, 1000);
            }

            // Event listeners
            startButton.addEventListener('click', startGame);
            restartButton.addEventListener('click', startGame);
            document.addEventListener('keydown', (e) => {
                if (e.code === 'Space') {
                    e.preventDefault();
                    if (!gameActive && startScreen.classList.contains('hidden')) {
                        startGame();
                    } else {
                        jump();
                    }
                }
            });
            document.addEventListener('click', (e) => {
                if (e.target === document || e.target === gameContainer) {
                    if (!gameActive && startScreen.classList.contains('hidden')) {
                        startGame();
                    } else {
                        jump();
                    }
                }
            });

            // Add grass texture to ground
            ground.style.backgroundImage = 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 100 20\' width=\'100\' height=\'20\'%3E%3Cpath fill=\'%23795548\' d=\'M0,20 L100,20 L100,0 L0,0 Z\'/%3E%3Cpath fill=\'%238BC34A\' d=\'M0,10 L10,15 L20,10 L30,15 L40,10 L50,15 L60,10 L70,15 L80,10 L90,15 L100,10 L100,20 L0,20 Z\'/%3E%3C/svg%3E")';
            ground.style.backgroundRepeat = 'repeat-x';
        });
    </script>
</body>
</html>
    